<script setup lang="ts">
import {reactive, ref, watch} from 'vue'
import {channelInsert, channelUpdate, channelInfo} from "@/api/channel";
import {ElMessage} from "element-plus";
import {useCommon} from '@/hooks/web/useCommon'
import UploadDefault from '@/components/uploadFile/UploadDefault.vue'

let {
  fetchDataBox,
  schoolOptions,
  degreeOptions,
} = useCommon()

let subLoading = ref(false)
let loading = ref(false)
let file = ref('')
let form = reactive({
  id: '',
  name: '',
  phone: '',
  project_manager: '',
  school_id: '',
  project_id: '',
  yixiang: '',
  content: '',
  file_id: '',
  contract_status: '1',
})

let formRef = ref('')
const formRules = {
  name: [{required: true, message: '请输入客户机构名称', trigger: 'blur'}],
  phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
  project_manager: [{required: true, message: '请输入客户项目负责人', trigger: 'blur'}],
  school_id: [{required: true, message: '请选择合作院校', trigger: 'change'}],
  project_id: [{required: true, message: '请选择合作项目', trigger: 'change'}],
  yixiang: [{required: true, message: '请选择意向类型', trigger: 'change'}],
  contract_status: [{required: true, message: '请选择签约情况', trigger: 'change'}],
}

const handleClose = (type) => {
  formRef.value.resetFields()
  form.id = ''
  file.value.fileList = [];
  emit('handleClose', type)
}

const fetchInfo = async (id) => {
  loading.value = true
  let res = await channelInfo({id: id});
  loading.value = false
  if (res) {

    if (res.data.school_id) {
      fetchDataBox('project', res.data.school_id)
    }

    file.value.fileList = res.data.fileList
    form = Object.assign(form, res.data)
  }
}

const onChangeSchool = (e) => {
  form.project_id = ''
  fetchDataBox('project', e)
}

watch(() => props.dialogFormVisible, (newValue) => {
      if (newValue) {
        fetchDataBox('school', '')
      }
    },
)

const handleSubmit = () => {
  console.log(file.value.fileList);

  formRef.value.validate(async valid => {
    if (valid) {
      let res;
      let fileId = []
      file.value.fileList.forEach(item => {
        fileId.push(item.file_id)
      })
      form.file_id = fileId
      subLoading.value = true
      if (form.id) {
        res = await channelUpdate(form)
      } else {
        res = await channelInsert(form)
      }
      subLoading.value = false
      if (res) {
        ElMessage({type: 'success', message: form.id ? '修改成功' : '添加成功'})
        handleClose('submit')
      }
    }
  })
}

let props = defineProps({
  dialogFormVisible: Boolean,
  mobile: Boolean
})
let emit = defineEmits(['handleClose'])
defineExpose({fetchInfo})
</script>

<template>
  <el-dialog v-model="props.dialogFormVisible" title="新增渠道" draggable :before-close="handleClose"
             :width="mobile ?'90%':'50%'">
    <el-form :model="form" label-position="top" :rules="formRules" ref="formRef" v-loading="loading">
      <el-row justify="space-around">
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="客户机构" prop="name">
            <el-input v-model="form.name" placeholder="请输入客户机构"/>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="客户项目负责人" prop="project_manager">
            <el-input v-model="form.project_manager" placeholder="请输入客户项目负责人"/>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话"/>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="合作院校" prop="school_id">
            <el-select placeholder="请选择合作院校" v-model="form.school_id" @change="onChangeSchool">
              <el-option v-for="item in schoolOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="合作项目" prop="project_id">
            <el-select placeholder="请选择合作项目" v-model="form.project_id">
              <el-option v-for="item in degreeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="意向类型" prop="yixiang">
            <el-select placeholder="请选择意向类型" v-model="form.yixiang">
              <el-option label="准客户" value="1"></el-option>
              <el-option label="意向客户" value="2"></el-option>
              <el-option label="一般客户" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="签约情况" prop="contract_status">
            <el-radio-group v-model="form.contract_status">
              <el-radio border label="1">未签约</el-radio>
              <el-radio border label="2">已签约</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
          <el-form-item label="上传合同附件">
            <upload-default ref="file" :file-type="'text'" :limit="9"/>
          </el-form-item>
        </el-col>
        <el-col :lg="9" :xs="24" :md="11">
        </el-col>
        <el-col :lg="21" :xs="24" :md="24">
          <el-form-item label="首咨信息" prop="content">
            <el-input :disabled="!!form.id" v-model="form.content" :rows="4" type="textarea"
                      placeholder="请输入首咨信息"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" :loading="subLoading">
          立即提交
        </el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.el-select {
  width: 100%;
}
</style>